 <template>
  <div id="forgetPage" class="flex" :style="'background-image: url(' + bgimg + ')'">
    <div class="loLeft">
      <div class="text">
        <div><span style="font-size: 25px">1993.02.29</span> 人类历史上第一个笔网络支付业务在美国旧金山zore发生</div>
        <div style="margin-top: 40px">
          来自美国旧金山zore市的年轻人Okala抱着尝试的心态在Amazon网站进行第一笔网上支付交易，从自己的paypol账号上转出20美元，至此，人类历史上第一部笔网络支付交易诞生……
        </div>
      </div>
    </div>
    <div class="loRight flex">
      <div class="rightBox  shadow">
        <div class="imgBox">
          <img style="cursor:pointer;" src="../../assets/img/logo.jpg" alt="logo">
        </div>
        <div class="inputBox flex">
          <div class="left">
            <i class="iconfont icon-user"></i>
          </div>
          <input class="right" v-model="form.username" :maxlength="10" placeholder="请输入您的用户名" type="text">

        </div>
        <div class="checkCode flex">
          <input class="input1" v-model="form.code" placeholder="验证码(邮箱获取)" :maxlength="6" type="text">
          <el-button class="button2" type="warning" :disabled="login" @click="getCheckCode" size="small">{{text}}</el-button>
        </div>
        <div class="inputBox flex">
          <div class="left">
            <i class="iconfont icon-suo"></i>
          </div>
          <input class="right" v-model="form.password" :maxlength="20"   placeholder="请输入新密码" type="password">
        </div>
        <div class="inputBox flex">
          <div class="left">
            <i class="iconfont icon-suo"></i>
          </div>
          <input class="right" v-model="form.password2" :maxlength="20"   placeholder="请确认输入新密码" type="password">
        </div>

        <div class="button">
          <!--<button>安全登录</button>-->
          <el-button style="width: 50%;font-size: 14px" size="small" type="warning"   @click.stop="safeLogin2">找回密码</el-button>
        </div>
        <div class="forget" @click="goLogin">去登陆</div>
      </div>
    </div>
  </div>
</template>

<script>
  import bgimg from '../../assets/img/bg.jpg'
  import md5 from 'md5'
  export default {
    data () {
      return {
        bgimg: bgimg,
        login: false,
        form: {
          username: undefined,
          password: undefined,
          code: undefined,
          password2: undefined
        },
        text: '获取验证码',
        code: undefined
      }
    },
    created () {
    },
    methods: {
      safeLogin2 () {
        if (!this.form.username) {
          this.$message('请输入用户名')
        } else if (!this.form.code) {
          this.$message('请输入验证码')
        } else if (!this.form.password) {
          this.$message('请输入新密码')
        } else if (this.form.password2 != this.form.password) {
          this.$message('您两次输入的密码不一致')
        } else {
          let params = {}
          Object.assign(params, this.form)
          params.password2 = undefined
          params.password = md5(params.password)
           this.$api.checkCodeNoPwd(params).then(res => {
             if (res.code === '000000') {
               this.$message.success('密码找回成功，请登录')
               this.$router.push('/')
             }
           })
        }
      },
      getCheckCode () {
        this.$api.sendForgetEmail({userName: this.form.username}).then(res => {
          if (res.code === '000000') {
            this.login = true
            this.$message.success('验证码发送成功')
            let num = 60
            // this.text = '获取验证码' + num
            let id = setInterval(() => {
              if (num !== 0) {
                console.log(num)
                this.text = '获取验证码' + num
                num--
              } else {
                clearInterval(id)
                this.login = false
                this.text = '获取验证码'
              }
            }, 1000)
          }
        })
      },
      goLogin () {
        this.$router.push('/')
      }
    }
  }
</script>

<style lang="less" scoped>
  @import "../../assets/iconfont/iconfont.css";
  #forgetPage{
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    .loLeft{
      width: 60%;
      .text{
        width: 60%;
        height: 100%;
        margin: auto;
        align-self: center;
        color: white;
        text-align: left;
        font-size: 14px;
        line-height: 30px;
      }
    }
    .loRight{
      flex: 1;
      /*justify-content: left;*/
      margin-right: 170px;
      .rightBox{
        background-color: #595459;
        /*width: 290px;*/
        width: 82%;
        height: 80%;
        border: 1px solid #edda32;

      }
      .imgBox{
        padding: 20px;
        img{
          width: 75px;
          height: 75px;
          margin: auto;
          border-radius: 50%;
        }
      }
      .inputBox{
        /*width: 195px;*/
        width: 70%;
        height: 33px;
        line-height: 34px;
        border: none;
        background-color: #f2edf2;
        margin: auto;
        margin-bottom: 20px;
        .left{
          width: 40px!important;
          /*border-right: 1px solid #ccc;*/
        }
        .right{
          flex: 1;
          border: 0;
          font-size: 13px;
          padding-left: 6px;
          outline: none;
          width: 100%;
        }
      }
      .checkCode{
        width: 70%;
        /*border: 1px solid #ccc;*/
        height: 34px;
        margin: auto;
        margin-bottom: 20px;
        justify-content: space-between;
        .button2{
          background-color: #edda32;
          border: 0;
          border-radius: 5px;
          cursor: pointer;
          color: #000;
          font-size: 13px;
        }
        .input1{
          width: 45%;
          height: 100%;
          border: none;
          outline: none;
          padding-left: 9px;
        }
        .img1{
          width: 45%;
          height: 100%;
          /*border: 1px solid #ccc;*/
          cursor: pointer;
        }
      }
      .button{
        button{
          width: 150px;
          /*height: 34px;*/
          background-color: #edda32;
          border: 0;
          border-radius: 5px;
          cursor: pointer;
          color: #000;
        }
      }
      .forget{
        font-size: 12px;
        padding: 20px;
        text-align: right;
        color: white;
        cursor: pointer;
      }
    }
    input{
      /*font-size: 15px;*/
    }
  }
</style>
